<template>
  <!-- <div style="width: 100%;height:100vh;display: flex;padding: 0 20px;">
        <div style="margin:auto;width: 100%;">
            <v-text-field v-model="postData.username" label="用户名"></v-text-field> -->
  <!-- <v-text-field v-model="password" label="密码"></v-text-field> -->
  <!-- <v-label style="margin: 10px 20px;font-size: 20px;float: right;" 
            @click="model=model=='登录'?'注册':'登录'">{{model=='登录'?'注册':'登录'}}</v-label>
            <v-btn v-if="model=='登录'" width="100%" @click="login">登录</v-btn>
            <v-btn v-if="model=='注册'" width="100%" @click="register">注册</v-btn>
        </div>
    </div> -->

  <div class="content">
    <div class="loginBox">
      <h3>{{ model }}</h3>
      <div class="inputBox">
        <div class="ipt">
          <v-icon icon="mdi-account" size="24" color="rgb(247,120,172)" class="uni-icons normal_screen" />
          <!-- 小屏幕显示 -->
          <v-icon icon="mdi-account" size="20" color="rgb(247,120,172)" class="uni-icons small_screen" />
          <input :disabled="handling" type="text" @keyup.enter="login" v-model="postData.username"
            placeholder="请输入账号" />
        </div>
        <div class="ipt" v-if="true">
          <v-icon icon="mdi-eye" size="24" color="rgb(247,120,172)" class="uni-icons normal_screen" />
          <!-- 小屏幕显示 -->
          <v-icon icon="mdi-eye" size="20" color="rgb(247,120,172)" class="uni-icons small_screen" />
          <input type="password" value="" placeholder="请输入密码" @keyup.enter="login" v-model="postData.passwordClear" />
        </div>
        <div class="forgetPwd">
          <span v-if="false">忘记密码</span>
          <span v-if="siteConfig.openRegister" style="cursor: pointer" @click="model = model == '登录' ? '注册' : '登录'">切换为
            <strong style="color: #2196f3">{{
              model == "登录" ? "注 册" : "登 录"
            }}</strong>
            模式</span>
        </div>
        <button v-if="model == '登录'" width="100%" @click="login" type="button" :disabled="handling">
          登录{{ handling ? "中..." : "" }}
        </button>
        <button v-if="model == '注册'" width="100%" @click="register" type="button" :disabled="handling">
          注册{{ handling ? "中..." : "" }}
        </button>
      </div>
      <div class="tipbox" v-if="siteConfig.openOauthLogin">
        <div class="txt">—— 其他账号登录（未实现） ——</div>
        <div class="otherUser">
          <v-icon icon="mdi-qqchat" @click="openCloudOAuth2Login" size="40" color="rgb(66,157,250)"
            class="uni-icons normal_screen" />
          <v-icon icon="mdi-wechat" size="40" color="rgb(2,187,17)" class="uni-icons normal_screen" />
          <!-- 小屏幕显示 -->
          <v-icon icon="mdi-qqchat" size="30" color="rgb(66,157,250)" class="uni-icons small_screen" />
          <v-icon icon="mdi-wechat" size="30" color="rgb(2,187,17)" class="uni-icons small_screen" />
        </div>
      </div>
    </div>

    <div class="tip">
      在线词典 2025
      <br />
      备案号：桂ICP备2025053001
    </div>
  </div>

  <v-snackbar v-model="snackbar">
    {{ text }}
  </v-snackbar>
</template>

<script>
//import {getQueryVariable} from '@/util/ruoyi'
import { getUserInfo, login, register } from "@/api/auth";
import { getSiteConfig } from "@/api/publicApi";

export default {
  data() {
    return {
      postData: {
        username: "",
        passwordClear: "",
      },
      handling: false,
      snackbar: false,
      text: "",
      model: "登录",
      siteConfig: { openRegister: true,openOauthLogin:true },
    };
  },
  created() {
    this.getSiteConfig()
    this.checkAuth();
  },
  methods: {
    checkAuth() {
      getUserInfo().then((resp) => {
        if (resp.data != null) document.location.href = "/index.html";
      });
    },
    login() {
      if (
        this.postData.username == null ||
        this.postData.username == "" ||
        this.postData.passwordClear == null ||
        this.postData.passwordClear == ""
      )
        return;
      this.handling = true;
      let param = {
        username: this.postData.username,
        password: btoa(this.postData.passwordClear),
      };
      login(param)
        .then((resp) => {
          if (resp.code != 1 || resp.data.token == null) {
            this.text = "登录失败：" + resp.msg;
            this.snackbar = true;
            return;
          }
          localStorage.setItem("Cloud-Dictionary-Token", resp.data.token);
          this.text = "登录成功";
          this.snackbar = true;
          if (this.getQueryVariable("redirect_url") != null)
            document.location.href = this.getQueryVariable("redirect_url");
          else document.location.href = "/index.html";
        })
        .finally(() => (this.handling = false));
    },
    register() {
      if (
        this.postData.username == null ||
        this.postData.username == "" ||
        this.postData.passwordClear == null ||
        this.postData.passwordClear == ""
      )
        return;
      let checkResult=this.checkPasswordStrength(this.postData.passwordClear)
      if(!checkResult.checkResult){
        this.text=checkResult.msg
        this.snackbar=true
        return
      }
      this.handling = true;
      let param = {
        username: this.postData.username,
        password: btoa(this.postData.passwordClear),
      };
      register(param)
        .then((resp) => {
          if (resp.code != 1 || resp.data == null) {
            this.text = '注册失败：'+resp.msg;
            this.snackbar = true;
            return;
          }
          this.text = "注册成功";
          this.snackbar = true;
        })
        .finally(() => (this.handling = false));
    },
    getQueryVariable(variable, url) {
      let query;
      if (url != null)
        query = url.substring(url.indexOf("?"), url.length).substring(1);
      else query = window.location.search.substring(1);
      let vars = query.split("&");
      for (let i = 0; i < vars.length; i++) {
        let pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return null;
    },
    checkPasswordStrength(password) {
      if (!this.siteConfig.forceComplexPassword)
        return { checkResult: true, msg: "验证通过" };

      // 定义正则表达式
      const minLength = 6;
      const hasUpperCase = /[A-Z]/;
      const hasLowerCase = /[a-z]/;
      const hasNumber = /[0-9]/;
      const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/;

      // 检查密码长度
      if (password.length < minLength) {
        return { checkResult: false, msg: "密码长度不能小于6位" };
      }

      // 检查是否包含大写字母
      if (!hasUpperCase.test(password)) {
        return { checkResult: false, msg: "密码必须包含大写字母" };
      }

      // 检查是否包含小写字母
      if (!hasLowerCase.test(password)) {
        return { checkResult: false, msg: "密码必须包含小写字母" };
      }

      // 检查是否包含数字
      if (!hasNumber.test(password)) {
        return { checkResult: false, msg: "密码必须包含数字" };
      }

      // 检查是否包含特殊字符
      if (!hasSpecialChar.test(password)) {
        return { checkResult: false, msg: "密码必须包含特殊字符" };
      }

      // 如果所有条件都满足，返回true
      return { checkResult: true, msg: "验证通过" };
    },
    getSiteConfig() {
      getSiteConfig().then((resp) => {
        this.siteConfig = resp.data;
      });
    },
    openCloudOAuth2Login() {
      // window.open('http://sa-oauth-server.com:8081/auth-api/oauth2/authorize?response_type=code&client_id=1001&redirect_uri=http://localhost:5173/login.html&scope=openid')
      window.open(
        "http://localhost:5174/oauth2.html?response_type=code&client_id=1001&redirect_uri=http://localhost:5173/login.html&scope=openid"
      );
    },
  },
};
</script>

<style scoped>
.content {
  height: 100vh;
  /* background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F10%2F20200510005139_JR8fL.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1714820289&t=e835cde99a094cbd98f9c318f25160ec")
    no-repeat; */
  background-image: url(../assets/img/login_bg.jpg);
  background-size: 100% 100%;
  /* width: 100vw; */
}

.loginBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* width: 90%; */
  background-color: #fff;
  border-radius: 10px;
  padding: 40px;
  box-sizing: border-box;
}

h3 {
  color: rgb(247, 120, 172);
  font-size: 40px;
  letter-spacing: 10px;
  margin-bottom: 40px;
}

/* .inputBox{
    
  } */
.ipt {
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  padding-left: 10px;
}

.ipt input {
  margin-left: 20px;
  font-size: 28px;
  margin-right: 20px;
  outline-style: none;
}

.forgetPwd {
  font-size: 14px;
  color: #b5b5b5;
  text-align: end;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
}

button {
  margin-top: 20px;
  line-height: 45px;
  text-align: center;
  background: linear-gradient(to right, rgb(255, 170, 127), rgb(247, 120, 172));
  border-radius: 30px;
  color: #fff;
  /* margin-top: 40px; */
  width: 100%;
}

button:hover {
  background: linear-gradient(to right, rgb(222 167 140), rgb(228 115 161));
}

.tip {
  text-align: center;
  font-size: 18px;
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f4f4f4;
}

.tipbox {
  text-align: center;
  margin-top: 20px;
}

.otherUser {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.txt {
  font-size: 18px;
  color: #cbcbcb;
}

.otherUser .uni-icons {
  /* margin-left: 20px; */
  margin: 0 10px;
}

.small_screen {
  display: none;
}

@media screen and (max-width: 575px) {
  .content {
    background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F10%2F20200510005139_JR8fL.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1714820289&t=e835cde99a094cbd98f9c318f25160ec") no-repeat;
  }

  .loginBox {
    width: 90%;
    padding: 20px;
  }

  h3 {
    font-size: 30px;
    margin-bottom: 20px;
  }

  .ipt {
    height: 45px;
    margin-bottom: 15px;
  }

  .ipt input {
    margin-left: 10px;
    font-size: 16px;
  }

  .txt {
    font-size: 16px;
  }

  .otherUser {
    margin-top: 20px;
  }

  button {
    margin-top: 15px;
    border-radius: 20px;
    line-height: 40px;
  }

  .small_screen {
    display: inline;
  }

  .normal_screen {
    display: none;
  }

  .ipt input {
    margin-left: 10px;
    margin-right: 10px;
  }
}
</style>
